<template>
    <div id="goodsdetails">
        <div id="goods-title" :class="{titletop:showlabel2}">
            <a class="chooseit" @click="titlechoose(1,'#trafficInfo')" :class="{showCont:n==1}">
                产品介绍
            </a>
            <a class="chooseit" @click="titlechoose(2,'#buyNec')" :class="{showCont:n==2}">
                购买需知
            </a>
        </div>
        <trafficInfo></trafficInfo>
        <buyNec></buyNec>
    </div>
</template>

<script>
import trafficInfo from '@/components/details/trafficInfo';
import buyNec from '@/components/details/buyNec'

export default {
    name:"goodsdetails",
    data(){
        return {
            n:1,
            showlabel2:false
        }
    },
    methods:{
        titlechoose(arg,arg2){
            var arg2info = document.querySelector(arg2);
            document.documentElement.scrollTop = arg2info.offsetTop
            this.n=arg;
        },
        handleScroll2(){
            var docTop2 = document.documentElement.scrollTop
                
                
            var trafficInfo = document.all.trafficInfo
            var buyNec = document.all.buyNec
            var guesslike2 = document.all.guesslike


            var trafficInfoTop = trafficInfo.offsetTop
            var buyNecTop = buyNec.offsetTop
            var guesslikeTop2 = guesslike.offsetTop


            if(docTop2>=trafficInfoTop-80){
                this.showlabel2=true;
                this.n=1;
                // console.log("test"); 
            }else{
                this.showlabel2=false;
            }
            if(docTop2>=buyNecTop){
                this.n=2;
            }
            if(docTop2>=guesslikeTop2-70){
                this.showlabel2=false
            }
            // console.log(docTop2);
        }
    },
    mounted(){            
        window.addEventListener('scroll', this.handleScroll2)
            
    },
    components:{
        trafficInfo:trafficInfo,
        buyNec:buyNec
    }
}
</script>

<style lang="less" scoped>
    #goodsdetails{
        #goods-title{
            background-color: white;
            padding:20px 10px;
            display: flex;
            text-align: center;
            a{
                display:inline-block;
                width: 50%;
                color:#4c4d4f;
                padding: 3px 0;
            }
            a:first-child{
                border-radius: 4px 0 0 4px;
            }
            a:last-child{
                border-radius: 0 4px 4px 0;
            }
            .chooseit{
                border:1px solid #4c4d4f;
            }
            .showCont{
                background-color: #4c4d4f;
                color:white;
            }
        }
        .titletop{
            position: fixed;
            top: 50px;
            width: 100vw;
            z-index: 99999;
        }
    }
</style>




